<style lang="less" scoped="">
    @import './message-center.less';
    @import '../../../styles/common.less';
</style>

<template>
    <Dropdown trigger="click" class="message-center" placement="bottom-end">
        <a href="javascript:void(0)" class="dropdown-btn">
            <Badge dot count="1">
                <Icon type="android-notifications"></Icon>
            </Badge>
        </a>
        <DropdownMenu slot="list" class="notify-con">
            <div class="notify-title">通知列表<a href="javascript:;" @click="moreClick" style="float: right;font-size:10px;color: #7f8c8d">更多</a></div>
            <div style="text-align: right;margin:10px;">
                <div class="media" v-for="m in data">
                    <a href="javascript:;" @click="itemClick(m)">
                        <div class="media-left">
                            <Icon type="person" style="font-size: 24px;"></Icon>
                        </div>
                        <div class="media-body">
                            <div class="media-body-top">{{m[top]}}</div>
                            <div class="media-body-middle" :class="!m[heightLight]?'text-bold':''">{{m[title]}}</div>
                            <div class="media-body-bottom">{{m[bottom]}}</div>
                        </div>
                    </a>
                </div>
            </div>
        </DropdownMenu>
    </Dropdown>

</template>

<script>


  export default {
    props: {
      data:{
        type:Array
      },
      title:{
        type:String,
        default:'title'
      },
      top:{
        type:String,
        default:'sender'
      },
      bottom:{
        type:String,
        default:'sendDate'
      },
      heightLight:{
        type:String,
        default:"isRead"
      }
    },
    components: {},
    data () {
      return {};
    },
    methods: {
      moreClick (e) {
        this.$emit('moreClick', e);
      },
      itemClick (d) {
        this.$emit('itemClick', d);
      }
    }
  };
</script>
